<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="favicon.ico" />
    <title>vis.js - Edges documentation.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
      td.type {
        width: 90px;
      }
    </style>
    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
  </head>

  <body onload="prettyPrint();">
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false"
                aria-controls="navbar"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav"></ul>
              <form class="navbar-form navbar-right" role="search">
                <input
                  name="q"
                  id="tipue_search_input"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  placeholder="Enter keywords"
                />
                <button
                  type="button"
                  class="btn btn-default"
                  onclick="vis.initSiteSearch(true);"
                >
                  Go!
                </button>
              </form>
              <div id="search-results-wrapper" class="panel panel-default">
                <div class="panel-body">
                  <div id="tipue_search_content"></div>
                </div>
              </div>
              <div id="keyword-info" class="panel panel-success">
                <div class="panel-body">
                  Found <span id="keyword-count"></span> results. Click
                  <a id="keyword-jumper-button" href="">here</a> to jump to the
                  first keyword occurence!
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div class="container full">
      <h1>Network - edges</h1>

      <p>
        Handles the creation and deletion of edges and contains the global edge
        options and styles.
      </p>
      <h3>Options</h3>

      <p>
        The options for the edges have to be contained in an object titled
        'edges'. All of these options can be supplied per edge as well.
        Obviously, 'id' should not be defined globally but per edge. Options
        defined in the global edges object, are applied to all edges. If an edge
        has options of its own, those will be used instead of the global
        options.
      </p>
      <p>
        <b
          ><i
            >When you have given an edge an option, you will override the global
            option for that property. If you then set that option to
            <code>null</code>, it will revert back to the default value.</i
          ></b
        >
      </p>
      <p>
        Click on the full options or shorthand options to show how these options
        are supposed to be used.
      </p>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)">
          <a href="#">options hidden</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="fullOptions"
        >
          <a href="#">full options</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="shortOptions"
        >
          <a href="#">shorthand options</a>
        </li>
      </ul>
      <br />
      <pre class="prettyprint lang-js options top hidden" id="fullOptions">
// these are all options in full.
var options = {
  edges:{
    arrows: {
      to: {
        enabled: false,
        imageHeight: undefined,
        imageWidth: undefined,
        scaleFactor: 1,
        src: undefined,
        type: "arrow"
      },
      middle: {
        enabled: false,
        imageHeight: 32,
        imageWidth: 32,
        scaleFactor: 1,
        src: "https://visjs.org/images/visjs_logo.png",
        type: "image"
      },
      from: {
        enabled: false,
        imageHeight: undefined,
        imageWidth: undefined,
        scaleFactor: 1,
        src: undefined,
        type: "arrow"
      }
    },
    endPointOffset: {
      from: 0,
      to: 0
    },
    arrowStrikethrough: true,
    chosen: true,
    color: {
      color:'#848484',
      highlight:'#848484',
      hover: '#848484',
      inherit: 'from',
      opacity:1.0
    },
    dashes: false,
    font: {
      color: '#343434',
      size: 14, // px
      face: 'arial',
      background: 'none',
      strokeWidth: 2, // px
      strokeColor: '#ffffff',
      align: 'horizontal',
      multi: false,
      vadjust: 0,
      bold: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold'
      },
      ital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'italic',
      },
      boldital: {
        color: '#343434',
        size: 14, // px
        face: 'arial',
        vadjust: 0,
        mod: 'bold italic'
      },
      mono: {
        color: '#343434',
        size: 15, // px
        face: 'courier new',
        vadjust: 2,
        mod: ''
      }
    },
    hidden: false,
    hoverWidth: 1.5,
    label: undefined,
    labelHighlightBold: true,
    length: undefined,
    physics: true,
    scaling:{
      min: 1,
      max: 15,
      label: {
        enabled: true,
        min: 14,
        max: 30,
        maxVisible: 30,
        drawThreshold: 5
      },
      customScalingFunction: function (min,max,total,value) {
        if (max === min) {
          return 0.5;
        }
        else {
          var scale = 1 / (max - min);
          return Math.max(0,(value - min)*scale);
        }
      }
    },
    selectionWidth: 1,
    selfReferenceSize: 20,
    selfReference:{
        size: 20,
        angle: Math.PI / 4,
        renderBehindTheNode: true
    },
    shadow:{
      enabled: false,
      color: 'rgba(0,0,0,0.5)',
      size:10,
      x:5,
      y:5
    },
    smooth: {
      enabled: true,
      type: "dynamic",
      roundness: 0.5
    },
    title:undefined,
    value: undefined,
    width: 1,
    widthConstraint: false
  }
}

network.setOptions(options);
</pre
      >

      <pre class="prettyprint lang-js options top hidden" id="shortOptions">
// here all options that have shorthand notations are shown.
var options = {
  edges:{
    arrows: 'to, from',
    color: 'red',
    font: '12px arial #ff0000',
    scaling:{
      label: true,
    },
    shadow: true,
    smooth: true,
  }
}

network.setOptions(options);
</pre
      >

      <p>These options can also be set per individual edge.</p>
      <table class="options" id="optionTable">
        <tr>
          <th>Name</th>
          <th>Type</th>
          <th>Default</th>
          <th>Description</th>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','arrows', this);"
        >
          <td><span parent="arrows" class="right-caret"></span> arrows</td>
          <td>Object or String</td>
          <td><code>undefined</code></td>
          <td>
            To draw an arrow with default settings a string can be supplied. For
            example: <code>arrows:'to, from, middle'</code> or
            <code>'to;from'</code>, any combination with any seperating symbol
            is fine. If you want to control the size of the arrowheads, you can
            supply an object.
          </td>
        </tr>
        <tr parent="arrows" class="hidden">
          <td class="indent">arrows.to</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            When true, an arrowhead on the 'to' side of the edge is drawn,
            pointing to the 'to' node with default settings. To customize the
            size of the arrow, supply an object.
          </td>
        </tr>
        <tr parent="arrows" class="hidden">
          <td class="indent2">arrows.to.enabled</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            Toggle the arrow on or off. This option is optional, if undefined
            and the scaleFactor property is set, enabled will be set to true.
          </td>
        </tr>
        <tr parent="arrows" class="hidden">
          <td class="indent2">arrows.to.imageHeight</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            The height of the image arrow. The height of the image file is used
            if this isn't defined.
          </td>
          .
        </tr>
        <tr parent="arrows" class="hidden">
          <td class="indent2">arrows.to.imageWidth</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            The width of the image arrow. The width of the image file is used if
            this isn't defined.
          </td>
          .
        </tr>
        <tr parent="arrows" class="hidden">
          <td class="indent2">arrows.to.scaleFactor</td>
          <td>Number</td>
          <td><code>1</code></td>
          <td>
            The scale factor allows you to change the size of the arrowhead.
          </td>
        </tr>
        <tr parent="arrows" class="hidden">
          <td class="indent2">arrows.to.src</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>The URL for the image arrow type.</td>
          .
        </tr>
        <tr parent="arrows" class="hidden">
          <td class="indent2">arrows.to.type</td>
          <td>String</td>
          <td><code>arrow</code></td>
          <td>
            The type of endpoint. Possible values are: <code>arrow</code>,
            <code>bar</code>, <code>circle</code> and <code>image</code>. The
            default is <code>arrow</code>
          </td>
          .
        </tr>
        <tr parent="arrows" class="hidden">
          <td class="indent">arrows.middle</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            Similar to the 'to' object, but with an arrowhead in the center of
            the edge. The direction of the arrow can be flipped by using a
            negative value for <code>arrows.middle.scaleFactor</code>.
          </td>
        </tr>
        <tr parent="arrows" class="hidden">
          <td class="indent">arrows.from</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            Exactly the same as the to object but with an arrowhead at the from
            node of the edge.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','endPointOffset', this);"
        >
          <td>
            <span parent="endPointOffset" class="right-caret"></span>
            endPointOffset
          </td>
          <td>Object</td>
          <td><code>undefined</code></td>
          <td>
            Adjust the endpoints. It can be useful if you want to have the
            endpoints placed on the nodes borders. <br />This feature is only
            possible when the arrowStrikethrough is true.
          </td>
        </tr>
        <tr parent="endPointOffset" class="hidden">
          <td class="indent">endPointOffset.from</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A negative number move the endpoint nearer the node's midpoint, and
            a positive number does the opposite.
          </td>
        </tr>
        <tr parent="endPointOffset" class="hidden">
          <td class="indent">endPointOffset.to</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A negative number move the endpoint nearer the node's midpoint, and
            a positive number does the opposite.
          </td>
        </tr>
        <tr>
          <td class="indent">arrowStrikethrough</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            When false, the edge stops at the arrow. This can be useful if you
            have thick lines and you want the arrow to end in a point. Middle
            arrows are not affected by this.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','chosen', this);"
        >
          <td><span parent="chosen" class="right-caret"></span> chosen</td>
          <td>Object or Boolean</td>
          <td><code>true</code></td>
          <td>
            When true, selecting or hovering on an edge will change it and its
            label's characteristics according to the default. When false, no
            change to the edge or its label will occur when the edge is chosen.
            If an object is supplied, finer-grained adjustment of edge and label
            characteristics is available when an edge is chosen.
          </td>
        </tr>
        <tr parent="chosen" class="hidden">
          <td class="indent">chosen.edge</td>
          <td>Function or Boolean</td>
          <td>undefined</td>
          <td>
            When true, selecting or hovering on an edge will change its
            characteristics according to the default. When false, no change to
            the edge will occur when the edge is chosen.
            <p>
              If a function is supplied, it is called when the edge is chosen.
            </p>
            <pre class="code">
  function(values, id, selected, hovering) {
    values.<i>property</i> = <i>chosenValue</i>;
  }</pre
            >
            <p>
              Any of the incoming arguments may be used to determine
              characteristic changes. If a property is not specifically assigned
              by the supplied function, it will be left unchanged. A specific
              function may be assigned to each particular edge in its options,
              or to all in the network's <code>edges</code> options.
            </p>
            <p>
              The properties define the characteristics that can be changed as
              follows:
            </p>
            <table>
              <tr>
                <th>Property</th>
                <th>Edge Reference</th>
              </tr>
              <tr>
                <td>dashes</td>
                <td>see dashes</td>
              </tr>
              <tr>
                <td>toArrow</td>
                <td>see arrows.to.enabled</td>
              </tr>
              <tr>
                <td>toArrowScale</td>
                <td>see arrows.to.scaleFactor</td>
              </tr>
              <tr>
                <td>toArrowType</td>
                <td>see arrows.to.type</td>
              </tr>
              <tr>
                <td>middleArrow</td>
                <td>see arrows.middle.enabled</td>
              </tr>
              <tr>
                <td>middleArrowScale</td>
                <td>see arrows.middle.scaleFactor</td>
              </tr>
              <tr>
                <td>middleArrowType</td>
                <td>see arrows.middle.type</td>
              </tr>
              <tr>
                <td>fromArrow</td>
                <td>see arrows.from.enabled</td>
              </tr>
              <tr>
                <td>fromArrowScale</td>
                <td>see arrows.from.scaleFactor</td>
              </tr>
              <tr>
                <td>fromArrowType</td>
                <td>see arrows.from.type</td>
              </tr>
              <tr>
                <td>arrowStrikethrough</td>
                <td>see arrowStrikethrough</td>
              </tr>
              <tr>
                <td>color</td>
                <td>see color.color</td>
              </tr>
              <tr>
                <td>inheritsColor</td>
                <td>see color.inherit</td>
              </tr>
              <tr>
                <td>opacity</td>
                <td>see color.opacity</td>
              </tr>
              <tr>
                <td>hidden</td>
                <td>see hidden</td>
              </tr>
              <tr>
                <td>length</td>
                <td>see length</td>
              </tr>
              <tr>
                <td>shadow</td>
                <td>see shadow.enabled</td>
              </tr>
              <tr>
                <td>shadowColor</td>
                <td>see shadow.color</td>
              </tr>
              <tr>
                <td>shadowSize</td>
                <td>see shadow.size</td>
              </tr>
              <tr>
                <td>shadowX</td>
                <td>see shadow.x</td>
              </tr>
              <tr>
                <td>shadowY</td>
                <td>see shadow.y</td>
              </tr>
              <tr>
                <td>width</td>
                <td>see width</td>
              </tr>
            </table>
            <br />
          </td>
        </tr>
        <tr parent="chosen" class="hidden">
          <td class="indent">chosen.label</td>
          <td>Function or Boolean</td>
          <td>undefined</td>
          <td>
            When true, selecting or hovering on an edge will change its label's
            characteristics according to the default. When false, no change to
            the edge's label will occur when the edge is chosen.
            <p>
              If a function is supplied, it is called when the edge is chosen.
            </p>
            <pre class="code">
  function(values, id, selected, hovering) {
    values.<i>property</i> = <i>chosenValue</i>;
  }</pre
            >
            <p>
              Any of the incoming arguments may be used to determine
              characteristic changes. If a property is not specifically assigned
              by the supplied function, it will be left unchanged. A specific
              function may be assigned to each particular edge in its options,
              or to all in the network's <code>edges</code> options.
            </p>
            <p>
              The properties define the characteristics that can be changed as
              follows:
            </p>
            <table>
              <tr>
                <th>Property</th>
                <th>Edge Reference</th>
              </tr>
              <tr>
                <td>color</td>
                <td>see font.color</td>
              </tr>
              <tr>
                <td>size</td>
                <td>see font.size</td>
              </tr>
              <tr>
                <td>face</td>
                <td>see font.face</td>
              </tr>
              <tr>
                <td>mod</td>
                <td>font modifier ('bold', 'italic', etc.)</td>
              </tr>
              <tr>
                <td>vadjust</td>
                <td>see font.vadjust</td>
              </tr>
              <tr>
                <td>strokeWidth</td>
                <td>see font.strokeWidth</td>
              </tr>
              <tr>
                <td>strokeColor</td>
                <td>see font.strokeColor</td>
              </tr>
            </table>
            <br />
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','color', this);"
        >
          <td><span parent="color" class="right-caret"></span> color</td>
          <td>Object or String</td>
          <td><code>Object</code></td>
          <td>
            The color object contains the color information of the edge in every
            situation. When the edge only needs a single color, a color value
            like <code>'rgb(120,32,14)'</code>, <code>'#ffffff'</code> or
            <code>'red'</code> can be supplied instead of an object.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent">color.color</td>
          <td>String</td>
          <td><code>'#848484'</code></td>
          <td>
            The color of the edge when it is not selected or hovered over
            <i>(assuming hover is enabled in the interaction module)</i>.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent">color.highlight</td>
          <td>String</td>
          <td><code>'#848484'</code></td>
          <td>The color the edge when it is selected.</td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent">color.hover</td>
          <td>String</td>
          <td><code>'#848484'</code></td>
          <td>
            The color the edge when the mouse hovers over it
            <i>(assuming hover is enabled in the interaction module)</i>.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent">color.inherit</td>
          <td>String or Boolean</td>
          <td><code>'from'</code></td>
          <td>
            <i
              >When color, highlight or hover are defined, inherit is set to
              false!</i
            >
            <br /><br />Supported options are:
            <code>true, false, 'from','to','both'</code>. <br /><br />The
            default value is 'from' which does the same as true: the edge will
            inherit the color from the border of the node on the 'from' side.
            <br /><br />When set to 'to', the border color from the 'to' node
            will be used. <br /><br />When set to 'both', the color will fade
            from the from color to the to color.
            <b>'both' is computationally intensive</b> because the gradient is
            recomputed every redraw. This is required because the angles change
            when the nodes move.
          </td>
        </tr>
        <tr parent="color" class="hidden">
          <td class="indent">color.opacity</td>
          <td>Number</td>
          <td><code>1.0</code></td>
          <td>
            It can be useful to set the opacity of an edge without manually
            changing all the colors. The opacity option will convert all colors
            (also when using inherit) to adhere to the supplied opacity. The
            allowed range of the opacity option is between <code>0 and 1</code>.
            This is only done once so the performance impact is not too big.
          </td>
        </tr>
        <tr>
          <td>dashes</td>
          <td>Array or Boolean</td>
          <td><code>false</code></td>
          <td>
            When true, the edge will be drawn as a dashed line. You can
            customize the dashes by supplying an Array. Array formart: Array of
            numbers, gap length, dash length, gap length, dash length, ... etc.
            The array is repeated until the distance is filled.
            <i
              >When using dashed lines in IE versions older than 11, the line
              will be drawn straight, not smooth</i
            >.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','font', this);"
        >
          <td><span parent="font" class="right-caret"></span> font</td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the label. A shorthand is also
            supported in the form <code>'size face color'</code> for example:
            <code>'14px arial red'</code>.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>Color of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.size</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>Size of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.face</td>
          <td>String</td>
          <td><code>'arial'</code></td>
          <td>Font face (or font family) of the label text.</td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.background</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>
            When not <code>undefined</code> but a <b>color string</b>, a
            background rectangle will be drawn behind the label in the supplied
            color.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.strokeWidth</td>
          <td>Number</td>
          <td><code>2</code></td>
          <td>
            As an alternative to the background rectangle, a stroke can be drawn
            around the text. When a value higher than 0 is supplied, the stroke
            will be drawn.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.strokeColor</td>
          <td>String</td>
          <td><code>'#ffffff'</code></td>
          <td>
            This is the color of the stroke
            <i>assuming the value for stroke is higher than 0</i>.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.align</td>
          <td>String</td>
          <td><code>'horizontal'</code></td>
          <td>
            Possible options: <code>'horizontal','top','middle','bottom'</code>.
            The alignment determines how the label is aligned over the edge. The
            default value <code>horizontal</code> aligns the label horizontally,
            regardless of the orientation of the edge. When an option other than
            <code>horizontal</code> is chosen, the label will align itself
            according to the edge.
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.vadjust</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A font-specific correction to the vertical positioning of the base
            font in the label text. (Positive is down.)
          </td>
        </tr>
        <tr parent="font" class="hidden">
          <td class="indent">font.multi</td>
          <td>Boolean or String</td>
          <td><code>false</code></td>
          <td>
            If <code>false</code>, the label is treated as pure text drawn with
            the base font. If <code>true</code> or <code>'html'</code> the label
            may be multifonted, with bold, italic and code markup, interpreted
            as html. If the value is <code>'markdown'</code> or
            <code>'md'</code> the label may be multifonted, with bold, italic
            and code markup, interpreted as markdown. The bold, italic,
            bold-italic and monospaced fonts may be set up under in the
            font.bold, font.ital, font.boldital and font.mono properties,
            respectively.
          </td>
        </tr>
        <tr
          parent="font"
          class="hidden toggle collapsible"
          onclick="toggleTable('optionTable','bold', this);"
        >
          <td><span parent="bold" class="right-caret"></span> font.bold</td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the bold font in the label. A
            shorthand is also supported in the form
            <code>'size face color'</code> for example:
            <code>'14px arial red'</code>.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>
            Color of the bold font in the label text. Defaults to the base
            font's color.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.size</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>
            Size of the bold font in the label text. Defaults to the base font's
            size.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.face</td>
          <td>String</td>
          <td><code>'arial'</code></td>
          <td>
            Font face (or font family) of the bold font in the label text.
            Defaults to the base font's face.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.mod</td>
          <td>String</td>
          <td><code>'bold'</code></td>
          <td>
            A string added to the face and size when determining the bold font
            in the label text.
          </td>
        </tr>
        <tr parent="bold" class="hidden">
          <td class="indent">font.bold.vadjust</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A font-specific correction to the vertical positioning of the bold
            font in the label text. (Positive is down.) Defaults to the base
            font's valign.
          </td>
        </tr>
        <tr
          parent="font"
          class="hidden toggle collapsible"
          onclick="toggleTable('optionTable','ital', this);"
        >
          <td><span parent="ital" class="right-caret"></span> font.ital</td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the italic font in the label. A
            shorthand is also supported in the form
            <code>'size face color'</code> for example:
            <code>'14px arial red'</code>.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>
            Color of the italic font in the label text. Defaults to the base
            font's color.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.size</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>
            Size of the italic font in the label text. Defaults to the base
            font's size.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.face</td>
          <td>String</td>
          <td><code>'arial'</code></td>
          <td>
            Font face (or font family) of the italic font in the label text.
            Defaults to the base font's face.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.mod</td>
          <td>String</td>
          <td><code>'italic'</code></td>
          <td>
            A string added to the face and size when determining the italic font
            in the label text.
          </td>
        </tr>
        <tr parent="ital" class="hidden">
          <td class="indent">font.ital.vadjust</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A font-specific correction to the vertical positioning of the italic
            font in the label text. (Positive is down.) Defaults to the base
            font's valign.
          </td>
        </tr>
        <tr
          parent="font"
          class="hidden toggle collapsible"
          onclick="toggleTable('optionTable','boldital', this);"
        >
          <td>
            <span parent="boldital" class="right-caret"></span> font.boldital
          </td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the bold italic font in the
            label. A shorthand is also supported in the form
            <code>'size face color'</code> for example:
            <code>'14px arial red'</code>.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>
            Color of the bold italic font in the label text. Defaults to the
            base font's color.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.size</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>
            Size of the bold italic font in the label text. Defaults to the base
            font's size.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.face</td>
          <td>String</td>
          <td><code>'arial'</code></td>
          <td>
            Font face (or font family) of the bold italic font in the label
            text. Defaults to the base font's face.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.mod</td>
          <td>String</td>
          <td><code>'bold'</code></td>
          <td>
            A string added to the face and size when determining the bold italic
            font in the label text.
          </td>
        </tr>
        <tr parent="boldital" class="hidden">
          <td class="indent">font.boldital.vadjust</td>
          <td>Number</td>
          <td><code>0</code></td>
          <td>
            A font-specific correction to the vertical positioning of the bold
            italic font in the label text. (Positive is down.) Defaults to the
            base font's valign.
          </td>
        </tr>
        <tr
          parent="font"
          class="hidden toggle collapsible"
          onclick="toggleTable('optionTable','mono', this);"
        >
          <td><span parent="mono" class="right-caret"></span> font.mono</td>
          <td>Object or String</td>
          <td><code>false</code></td>
          <td>
            This object defines the details of the monospaced font in the label.
            A shorthand is also supported in the form
            <code>'size face color'</code> for example:
            <code>'15px courier red'</code>.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.color</td>
          <td>String</td>
          <td><code>'#343434'</code></td>
          <td>
            Color of the monospaced font in the label text. Defaults to the base
            font's color.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.size</td>
          <td>Number</td>
          <td><code>15</code></td>
          <td>
            Size of the monospaced font in the label text. Defaults to the base
            font's size.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.face</td>
          <td>String</td>
          <td><code>'courier new'</code></td>
          <td>
            Font face (or font family) of the monospaced font in the label text.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.mod</td>
          <td>String</td>
          <td><code>''</code></td>
          <td>
            A string added to the face and size when determining the monospaced
            font in the label text.
          </td>
        </tr>
        <tr parent="mono" class="hidden">
          <td class="indent">font.mono.vadjust</td>
          <td>Number</td>
          <td><code>2</code></td>
          <td>
            A font-specific correction to the vertical positioning of the
            monospaced font in the label text. (Positive is down.) Defaults to
            the base font's valign.
          </td>
        </tr>
        <tr>
          <td>from</td>
          <td>Number or String</td>
          <td></td>
          <td>
            Edges are between two nodes, one to and one from. This is where you
            define the from node. You have to supply the corresponding node ID.
            This naturally only applies to individual edges.
          </td>
        </tr>
        <tr>
          <td>hidden</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            When true, the edge is not drawn. It is part still part of the
            physics simulation however!
          </td>
        </tr>
        <tr>
          <td>hoverWidth</td>
          <td>Number or Function</td>
          <td><code>0.5</code></td>
          <td>
            Assuming the hover behaviour is enabled in the
            <a href="./interaction.html">interaction module</a>, the hoverWidth
            determines the width of the edge when the user hovers over it with
            the mouse. If a number is supplied, this number will be
            <b>added</b> to the width. Because the width can be altered by the
            value and the scaling functions, a constant multiplier or added
            value may not give the best results. To solve this, you can supply a
            function. Example:

            <pre class="code">
var options: {
  edges: {
    hoverWidth: function (width) {return width+1;}
  }
}
</pre
            >
            It receives the <code>Number width</code> of the edge. In this
            simple example we add 1 to the width. You can taylor the logic in
            the function as long as it returns a <code>Number</code>.
          </td>
        </tr>

        <tr>
          <td>id</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>
            The id of the edge. The id is optional for edges. When not supplied,
            an UUID will be assigned to the edge. This naturally only applies to
            individual edges.
          </td>
        </tr>
        <tr>
          <td>label</td>
          <td>String</td>
          <td><code>undefined</code></td>
          <td>
            The label of the edge. HTML does not work in here because the
            network uses HTML5 Canvas.
          </td>
        </tr>
        <tr>
          <td>labelHighlightBold</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            Determines whether or not the label becomes bold when the edge is
            selected.
          </td>
        </tr>
        <tr>
          <td>length</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            The physics simulation gives edges a spring length. This value can
            override the length of the spring in rest.
          </td>
        </tr>
        <tr>
          <td>physics</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            When true, the edge is part of the physics simulation. When false,
            it will not act as a spring.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','scaling', this);"
        >
          <td><span parent="scaling" class="right-caret"></span> scaling</td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>
            If the <code>value</code> option is specified, the width of the
            edges will be scaled according to the properties in this object.
            Keep in mind that when using scaling, the <code>width</code> option
            is neglected.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent">scaling.min</td>
          <td>Number</td>
          <td><code>1</code></td>
          <td>
            If edges have a value, their widths are determined by the value, the
            scaling function and the min max values. The min value is the
            minimum allowed value.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent">scaling.max</td>
          <td>Number</td>
          <td><code>15</code></td>
          <td>
            This is the maximum allowed width when the edges are scaled using
            the value option.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent">scaling.label</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            When false, the label is not allowed to scale with the edge. If true
            it will scale using default settings. For further customization, you
            can supply an object.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.enabled</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            Toggle the scaling of the label on or off. If this option is not
            defined, it is set to true if any of the properties in this object
            are defined.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.min</td>
          <td>Number</td>
          <td><code>14</code></td>
          <td>The minimum font-size used for labels when scaling.</td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.max</td>
          <td>Number</td>
          <td><code>30</code></td>
          <td>The maximum font-size used for labels when scaling.</td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.maxVisible</td>
          <td>Number</td>
          <td><code>30</code></td>
          <td>
            When zooming in, the font is drawn larger as well. You can limit the
            perceived font size using this option. If set to 30, the font will
            never look larger than size 30 zoomed at 100%.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent2">scaling.label.drawThreshold</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>
            When zooming out, the font will be drawn smaller. This defines a
            lower limit for when the font is drawn. When using font scaling, you
            can use this together with the maxVisible to first show labels of
            important edges when zoomed out and only show the rest when zooming
            in.
          </td>
        </tr>
        <tr parent="scaling" class="hidden">
          <td class="indent">scaling.customScalingFunction</td>
          <td>Function</td>
          <td>in description</td>
          <td>
            If edges have <code>value</code> fields, this function determines
            how the size of the nodes are scaled based on their values. The
            default function is:
            <pre>
function (min,max,total,value) {
  if (max === min) {
    return 0.5;
  }
  else {
    var scale = 1 / (max - min);
    return Math.max(0,(value - min)*scale);
  }
}
</pre
            >
            The function receives the minimum value of the set, the maximum
            value, the total sum of all values and finally the value of the node
            or edge it works on.
            <b>It has to return a value between 0 and 1.</b> The nodes and edges
            then calculate their size as follows:
            <pre>
var scale = customScalingFunction(min,max,total,value);
var diff = maxWidth - minWidth;
myWidth = minWidth + diff * scale;
</pre
            >
            Please note: <code>maxWidth</code> and <code>minWidth</code> are the
            values <code>scaling.max</code> and
            <code>scaling.min</code> provided in the options.
          </td>
        </tr>
        <tr>
          <td>selectionWidth</td>
          <td>Number or Function</td>
          <td><code>1</code></td>
          <td>
            The selectionWidth determines the width of the edge when the edge is
            selected. If a number is supplied, this number will be
            <b>added</b> to the width. Because the width can be altered by the
            value and the scaling functions, a constant multiplier or added
            value may not give the best results. To solve this, you can supply a
            function. Example:

            <pre class="code">
var options: {
  edges: {
    selectionWidth: function (width) {return width*2;}
  }
}
</pre
            >
            It receives the <code>Number width</code> of the edge. In this
            simple example multiply the width by 2. You can taylor the logic in
            the function as long as it returns a <code>Number</code>.
          </td>
        </tr>
        <tr>
          <td>selfReferenceSize</td>
          <td>Number</td>
          <td><code>false</code></td>
          <td>
            When the to and from nodes are the same, a circle is drawn. This is
            the radius of that circle. This property is deprecated please use
            selfReference instead.
          </td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','selfReference', this);"
        >
          <td>
            <span parent="arrows" class="right-caret"></span> selfReference
          </td>
          <td>Object</td>
          <td><code>Object</code></td>
          <td>
            When the to and from nodes are the same, a circle is drawn. This
            provides radius of circle and position.
          </td>
        </tr>
        <tr parent="selfReference" class="hidden">
          <td class="indent">selfReference.size</td>
          <td>Number</td>
          <td><code>20</code></td>
          <td>This is the radius of circle.</td>
        </tr>
        <tr parent="selfReference" class="hidden">
          <td class="indent">selfReference.angle</td>
          <td>Number</td>
          <td><code>π / 4</code></td>
          <td>
            This is the angle (Provided in radians) to indicate position for the
            circle. If position is not provided then it will be top-right (π /
            4) corner.
          </td>
        </tr>
        <tr parent="selfReference" class="hidden">
          <td class="indent">selfReference.renderBehindTheNode</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            This is a flag that indicates whether self reference circle should
            be drawn as a full circle or rather should not overlap with parent
            node.
          </td>
          parentOptions.selfReference
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','shadow', this);"
        >
          <td><span parent="shadow" class="right-caret"></span> shadow</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            When true, the edge casts a shadow using the default settings. This
            can be further refined by supplying an object.
          </td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.enabled</td>
          <td>Boolean</td>
          <td><code>false</code></td>
          <td>
            Toggle the casting of shadows. If this option is not defined, it is
            set to true if any of the properties in this object are defined.
          </td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.color</td>
          <td>String</td>
          <td><code>'rgba(0,0,0,0.5)'</code></td>
          <td>
            The color size of the shadow as a string. Supported formats are
            'rgb(255,255,255)', 'rgba(255,255,255,1)' and '#FFFFFF'.
          </td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.size</td>
          <td>Number</td>
          <td><code>10</code></td>
          <td>The blur size of the shadow.</td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.x</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>The x offset.</td>
        </tr>
        <tr parent="shadow" class="hidden">
          <td class="indent">shadow.y</td>
          <td>Number</td>
          <td><code>5</code></td>
          <td>The y offset.</td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','smooth', this);"
        >
          <td><span parent="smooth" class="right-caret"></span> smooth</td>
          <td>Object or Boolean</td>
          <td><code>Object</code></td>
          <td>
            When true, the edge is drawn as a dynamic quadratic bezier curve.
            The drawing of these curves takes longer than that of straight
            curves but it looks better. There is a difference between dynamic
            smooth curves and static smooth curves. The dynamic smooth curves
            have an invisible support node that takes part in the physics
            simulation. If you have a lot of edges, you may want to consider
            picking a different type of smooth curves than dynamic for better
            performance.
          </td>
        </tr>
        <tr parent="smooth" class="hidden">
          <td class="indent">smooth.enabled</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            Toggle smooth curves on and off. This is an optional option. If any
            of the other properties in this object are set, this option will be
            set to true.
          </td>
        </tr>
        <tr parent="smooth" class="hidden">
          <td class="indent">smooth.type</td>
          <td>String</td>
          <td><code>'dynamic'</code></td>
          <td>
            Possible options:
            <code
              >'dynamic', 'continuous', 'discrete', 'diagonalCross',
              'straightCross', 'horizontal', 'vertical', 'curvedCW',
              'curvedCCW', 'cubicBezier'</code
            >. Take a look at
            <a href="../../examples/network/edgeStyles/smooth.html"
              >this example</a
            >
            to see what these look like and pick the one that you like best!
            <br /><br />
            When using dynamic, the edges will have an invisible support node
            guiding the shape. This node is part of the physics simulation.
          </td>
        </tr>
        <tr parent="smooth" class="hidden">
          <td class="indent">smooth.forceDirection</td>
          <td>String or Boolean</td>
          <td><code>false</code></td>
          <td>
            Accepted options: <code>['horizontal', 'vertical', 'none']</code>.
            This options is only used with the cubicBezier curves. When true,
            horizontal is chosen, when false, the direction that is larger (x
            distance between nodes vs y distance between nodes) is used. If the
            x distance is larger, horizontal. This is ment to be used with
            hierarchical layouts.
          </td>
        </tr>
        <tr parent="smooth" class="hidden">
          <td class="indent">smooth.roundness</td>
          <td>Number</td>
          <td><code>0.5</code></td>
          <td>
            Accepted range: <code>0 .. 1.0</code>. This parameter tweaks the
            roundness of the smooth curves for all types EXCEPT dynamic.
          </td>
        </tr>
        <tr>
          <td>title</td>
          <td>String or Element</td>
          <td><code>undefined</code></td>
          <td>
            Title to be displayed in a pop-up when the user hovers over the
            edge. The title can be an HTML element or a string containing plain
            text. See
            <a href="../../examples/network/other/html-in-titles.html"
              >HTML in titles example</a
            >
            if you want to parse HTML.
          </td>
        </tr>
        <tr>
          <td>to</td>
          <td>Number or String</td>
          <td></td>
          <td>
            Edges are between two nodes, one to and one from. This is where you
            define the to node. You have to supply the corresponding node ID.
            This naturally only applies to individual edges.
          </td>
        </tr>
        <tr>
          <td>value</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            When a value is set, the edges' width will be scaled using the
            options in the scaling object defined above.
          </td>
        </tr>
        <tr>
          <td>width</td>
          <td>Number</td>
          <td><code>1</code></td>
          <td>The width of the edge. If value is set, this is not used.</td>
        </tr>
        <tr
          class="toggle collapsible"
          onclick="toggleTable('optionTable','widthConstraint', this);"
        >
          <td>
            <span parent="widthConstraint" class="right-caret"></span>
            widthConstraint
          </td>
          <td>Number, Boolean or Object</td>
          <td><code>false</code></td>
          <td>
            If false, no widthConstraint is applied. If a number is specified,
            the maximum width of the edge's label is set to the value. The
            edge's label's lines will be broken on spaces to stay below the
            maximum.
          </td>
        </tr>
        <tr parent="widthConstraint" class="hidden">
          <td class="indent">widthConstraint.maximum</td>
          <td>Number</td>
          <td><code>undefined</code></td>
          <td>
            If a number is specified, the maximum width of the edge's label is
            set to the value. The edge's label's lines will be broken on spaces
            to stay below the maximum.
          </td>
        </tr>
      </table>

      <div class="flagbar">
        <a href="../../docs/network/edges.html" title="English"
          ><span class="flag en"></span
        ></a>
        <a href="../../docs-kr/network/edges.html" title="Korean"
          ><span class="flag kr"></span
        ></a>

        <br />

        Third party docs:
        <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
          ><span class="flag zh"></span
        ></a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
    <!-- jquery extensions -->
    <script src="../../common-docs-files/js/jquery.highlight.js"></script>
    <script src="../../common-docs-files/js/jquery.url.min.js"></script>
    <!-- Tipue vendor js -->
    <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
    <!-- controller -->
    <script src="../../common-docs-files/js/main.js"></script>
  </body>
</html>
